<li class="dropdown" id="header_task_bar">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="fa fa-tasks"></i>
        <span class="badge">5</span>
    </a>
    <ul class="dropdown-menu extended tasks">
        <li>
            <p>You have 12 pending tasks</p>
        </li>
        <li>
            <ul class="dropdown-menu-list scroller" style="height: 250px;">
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">New release v1.2</span>
                            <span class="percent">30%</span>
                        </span>
                        <span class="progress">
                            <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">
                                     40% Complete
                                </span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">Application deployment</span>
                            <span class="percent">65%</span>
                        </span>
                        <span class="progress progress-striped">
                            <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">65% Complete</span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">Mobile app release</span>
                            <span class="percent">98%</span>
                        </span>
                        <span class="progress">
                            <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">98% Complete</span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">Database migration</span>
                            <span class="percent">10%</span>
                        </span>
                        <span class="progress progress-striped">
                            <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">10% Complete</span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">Web server upgrade</span>
                            <span class="percent">58%</span>
                        </span>
                        <span class="progress progress-striped">
                            <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">58% Complete</span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">Mobile development</span>
                            <span class="percent">85%</span>
                        </span>
                        <span class="progress progress-striped">
                            <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">85% Complete</span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="task">
                            <span class="desc">New UI release</span>
                            <span class="percent">18%</span>
                        </span>
                        <span class="progress progress-striped">
                            <span style="width: 18%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">18% Complete</span>
                            </span>
                        </span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="external">
            <a href="#">
                 See all tasks <i class="m-icon-swapright"></i>
            </a>
        </li>
    </ul>
</li>
